<template>
	<view class="add_bank">
		<view class="form" v-if="formData.accountType === '30002002'">
			<i-formItem title="银行卡账号">
				<input placeholder-class="placeholder-class" v-model="formData.bankcardNum" type="number" placeholder="银行卡号">
			</i-formItem>
			<i-formItem title="预留手机号">
				<input placeholder-class="placeholder-class" v-model="formData.phone" type="number" placeholder="银行预留手机号">
			</i-formItem>
			<view class="message">* 仅支持绑定企业法人银行卡</view>
			<view style="height: 32rpx;"></view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E"
				@click="add">立即添加</i-buttons>
			<view style="height: 32rpx;"></view>
		</view>
		<view class="form" v-else>
			<i-formItem title="银行卡号">
				<input placeholder-class="placeholder-class" v-model="formData.bankcardNum" type="number" placeholder="请输入银行卡号">
			</i-formItem>
			<i-formItem title="开户行名称" :contStyle="{color: formData.bankDeposit ? '#2C2C2E': '#A0A0AD' ,width: '53%'}" :content="formData.bankDeposit ? formData.bankDeposit: '请选择开户行'" @click="navTo('/pages/views/selectBank', 'navigateTo')" :right="true">
			</i-formItem>
			<i-formItem title="支行名称">
				<input placeholder-class="placeholder-class" v-model="formData.bankBranchName" type="text" placeholder="请输入开户行支行名称">
			</i-formItem>
			<i-formItem title="支付行号">
				<input placeholder-class="placeholder-class" v-model="formData.unionBank" type="number" placeholder="请输入支付行号（12位数字）">
			</i-formItem>
			<view style="height: 32rpx;"></view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E"
				@click="add">立即添加</i-buttons>
			<view style="height: 32rpx;"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReady,
		onUnload
	} from '@dcloudio/uni-app'

	import {
		addMerCashCard,
		getAuthBankList,
		tlDelete
	} from '../../api/trilateral'

	import {
		showTost,
		checkForm,
		navTo
	} from '../../utils/common'
	import {
		phoneReg,
		bankReg,
	} from '../../utils/regs'

	const id = ref<string>('')
	const title = ref('')
	const keyword = ref('')
	const bankDepositShow = ref(false)
	const bankList = ref<any>([])

	const formData = reactive({
		"bankcardNum": "",
		"phone": "",
		accountType: '',
		bankDeposit: '',
		unionBank: '',
		bankBranchName: ''
	})

	const regs = {
		phone: { reg: phoneReg, message: '请输入正确手机号' },
	}

	onLoad((option) => {
		if (option.mer_account_type) {
			formData.accountType = option.mer_account_type
			title.value = option.title
		}
		getBankList()
	})
	onReady(() => {
		uni.setNavigationBarTitle({
			title: title.value
		})
	})

	const input = (e : { detail : { value : string } }) => {
		keyword.value = e.detail.value
		getBankList()
		bankDepositShow.value = true
	}

	const getBankList = async () => {
		const { data } = await getAuthBankList({ keywords: keyword.value })
		bankList.value = data
	}
	const selectItem = (str : string) => {
		formData.bankDeposit = str
		bankDepositShow.value = false
	}
	const add = async () => {
		const rlues = formData
		if (formData.accountType !== '30002002') {
			delete rlues.phone
		} else {
			delete rlues.bankDeposit
			delete rlues.unionBank
			delete rlues.bankBranchName
		}

		const data = checkForm(rlues, [], formData.accountType === '30002002' && regs)
		if (data) {
			return
		}
		if (formData.accountType === '30002001' && formData.unionBank.length !== 12) {
			showTost('请输入正确支付行号')
			return
		}
		await addMerCashCard(formData)
		showTost('添加银行卡成功', () => {
			uni.navigateBack()
		})
	}
	
	uni.$on('bankDeposit', (data) => {
		formData.bankDeposit = data
	})
	
	onUnload(() => {
		uni.$off('bankDeposit', () => { })
	})

</script>

<style lang="scss" scoped>
	.add_bank {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.form {
			padding: 0 24rpx;
		}

		input {
			width: 70%;
		}

		.message {
			@include dfont(24rpx);
			color: #A0A0AD;
			margin: 20rpx 0 48rpx 0;
		}

		.selectStr {
			@include flexRS;
			width: 70%;

			view {
				@include dfont;
				color: #A0A0AD;
			}

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.shop_item {
			@include flexRC;
			padding: 18rpx 0;
			@include dfont(26rpx);
			color: #A0A0AD;
		}
	}
</style>